<template>
  <div id="overview-map-container" style="width: 100%; height: 100%;"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
// import OSM from 'ol/source/OSM'; // 暂时注释掉 OSM
import { XYZ } from 'ol/source'; // 导入 XYZ 用于高德地图
import { defaults as DefaultControls, OverviewMap } from 'ol/control'; // 导入 OverviewMap 控件
import { fromLonLat } from 'ol/proj'; // 导入坐标转换函数

let map: Map | null = null;
let overviewMapControl: OverviewMap | null = null; // 声明概览地图控件变量

onMounted(() => {
  // 主地图的底图层，使用高德地图
  const mainMapBaseLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', // 高德地图业务图
    }),
  });

  // 概览地图的底图层，也使用高德地图
  const overviewMapBaseLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', // 高德地图业务图
    }),
  });

  // 创建概览地图控件实例
  overviewMapControl = new OverviewMap({
    layers: [overviewMapBaseLayer], // 为概览地图指定要显示的图层
    collapsed: false, // 默认不折叠，即默认展开显示
    tipLabel: '概览地图', // 鼠标悬停在概览地图按钮上的提示文本
  });

  // 初始化主地图
  map = new Map({
    controls: DefaultControls().extend([overviewMapControl]), // 将概览地图控件添加到主地图的控件集合中
    target: 'overview-map-container', // 主地图渲染的目标HTML元素ID
    layers: [mainMapBaseLayer], // 主地图的图层
    view: new View({
      center: fromLonLat([114.30, 30.50]), // 地图初始中心点，从经纬度转换为Web墨卡托投影
      zoom: 12, // 初始缩放级别
      projection: 'EPSG:3857', // 使用Web墨卡托投影
    }),
  });

  console.log("OverviewMap mounted.");
});

onUnmounted(() => {
  if (map) {
    // 在组件卸载时，清理地图资源
    map.setTarget(undefined); // 解除地图与DOM元素的绑定
    map = null; // 清空地图实例
  }
  if (overviewMapControl) {
    overviewMapControl = null;
  }
  console.log("OverviewMap unmounted.");
});
</script>

<style scoped>
#overview-map-container {
  width: 100%;
  height: 100%;
}
</style> 